import React, {Component} from 'react';
import {connect} from 'react-redux';
import './listNav.scss';
import {Link} from 'react-router-dom';
import $ from 'jquery'
import Loading from '../../../component/loading/loading'
import axios from 'axios'
import Mock from 'mockjs'

Mock.mock('/ssf', {
        "listnav": ["一房一厅", "两房一厅", "三房两厅", "四房两厅"],
        "data": [{
            "listName": "张丹",
            "listLevel": "设计总监",
            "listKeyWo": ["现代", "两房两厅", "85㎡"],
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listTx": "https://pic.qqtn.com/up/2018-5/15257418095187544.jpg",
            "listDist": "挪威阳光系列"
        },
            {
                "listName": "黄厚威",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095093473.jpg",
                "listDist": "丹麦清秋系列"
            },
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            }]
    }
)
Mock.mock('/ssf?1', {
        "listnav": ["一房一厅", "两房一厅", "三房两厅", "四房两厅"],
        "data": [{
            "listName": "张丹",
            "listLevel": "设计总监",
            "listKeyWo": ["现代", "两房两厅", "85㎡"],
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listTx": "https://pic.qqtn.com/up/2018-5/15257418095187544.jpg",
            "listDist": "挪威阳光系列"
        },
            {
                "listName": "黄厚威",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095093473.jpg",
                "listDist": "丹麦清秋系列"
            },
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            }]
    }
)
Mock.mock('/ssf?2', {
        "listnav": ["一房一厅", "两房一厅", "三房两厅", "四房两厅"],
        "data": [
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            },{
            "listName": "张丹",
            "listLevel": "设计总监",
            "listKeyWo": ["现代", "两房两厅", "85㎡"],
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listTx": "https://pic.qqtn.com/up/2018-5/15257418095187544.jpg",
            "listDist": "挪威阳光系列"
        },
            {
                "listName": "黄厚威",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095093473.jpg",
                "listDist": "丹麦清秋系列"
            }]
    }
)
Mock.mock('/ssf?3', {
        "listnav": ["一房一厅", "两房一厅", "三房两厅", "四房两厅"],
        "data": [
            {
                "listName": "黄厚威",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095093473.jpg",
                "listDist": "丹麦清秋系列"
            },
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            },
            {
                "listName": "张丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095187544.jpg",
                "listDist": "挪威阳光系列"
            },
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            }]
    }
)
Mock.mock('/ssf?4', {
        "listnav": ["一房一厅", "两房一厅", "三房两厅", "四房两厅"],
        "data": [{
            "listName": "张丹",
            "listLevel": "设计总监",
            "listKeyWo": ["现代", "两房两厅", "85㎡"],
            "listImg": "http://www.w3school.com.cn/i/eg_tulip.jpg",
            "listTx": "https://pic.qqtn.com/up/2018-5/15257418095187544.jpg",
            "listDist": "挪威阳光系列"
        },
            {
                "listName": "黄厚威",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201805/wpic790.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418095093473.jpg",
                "listDist": "丹麦清秋系列"
            },
            {
                "listName": "李丹",
                "listLevel": "设计总监",
                "listKeyWo": ["现代", "两房两厅", "85㎡"],
                "listImg": "http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg",
                "listTx": "https://pic.qqtn.com/up/2018-5/15257418099045805.jpg",
                "listDist": "午后巴黎系列"
            }]
    }
)

class ListNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            listnav: [],
            data: [],
            loading :false,
            firstIn:true
        }
    }

    componentWillMount() {
        axios.get(`/ssf`)
        //axios.get('http://shopapi.3d-home.cn/houses')
            .then(response => {
                //console.log(response.data)
                if(response.data.data !==null){
                    this.setState({
                        listnav: response.data.listnav,
                        data: response.data.data,
                        loading: true
                    });
                }else {
                    console.log(response);
                }
                //console.log(this.state)
            });
    }

    componentDidUpdate () {
        this.init();
    }

    init() {
        //console.log($('.listRealNav > ul > li').eq(0));
        if(this.state.firstIn){
            $('.listRealNav>ul>li').eq(0).addClass('hactive');
        }

    }

    onClick(key,e) {
        this.setState({
            firstIn:false
        });
        let kw = key +1;
        //console.log(kw);

        $(e.target).addClass('hactive').siblings().removeClass('hactive');
        this.setState({loading: false});
        axios.get('/ssf?' + kw)
            .then(response => {
                this.setState({
                    data: response.data.data,
                    loading:true
                });
            });

    }

    render() {
        return (
            <div className='homelistNav'>
                <div className='lscont'>
                    <div className='listRealNav'>
                        <ul>
                            {this.state.listnav && this.state.listnav.map((item, key) =>
                                <li key={key} onClick={this.onClick.bind(this,key)}>{item}</li>
                            )}
                        </ul>
                    </div>

                    <div className='zwf'></div>
                </div>
                {
                    !this.state.loading
                    ? <Loading></Loading>
                :this.state.data && this.state.data.map((item, key) =>
                    <div className='listPart' key={key}>
                        <Link to='/maindetails'>
                            <div className='listPartImg'>
                                <img src={item.listImg} alt=""/>
                            </div>
                        </Link>
                        <div className='listPart2'>
                            <div className='listP2Img'>
                                <img src={item.listTx} alt=""/>
                            </div>
                            <div className='listP2Na'>
                                <span className='listPart2Title'>{item.listName}</span>
                                <span className='listP2Level'>{item.listLevel}</span>
                            </div>
                            <div className='listP2Pi'>
                                <span className='listPart2Title2'>{item.listDist}</span>
                                <span className='lstkw'>
                                    {item.listKeyWo.map((val,i)=>
                                        <span key={i}>{val}</span>
                                    )}
                                </span>
                            </div>
                            <Link to='/chatonline' className='listPart2Button'>预约</Link>
                        </div>
                    </div>
                )}
            </div>
        )
    }
}

export default connect()(ListNav)